import { useEffect, useState } from "react";
import MyChart from "@/components/my-chart";
import MyDialog from "@/components/my-dialog";

const Projects = () => {
  const [visits, setVisits] = useState<number[]>([]);

  useEffect(() => {
    setTimeout(() => {
      const result = [5, 20, 36, 10, 10, 20];

      setVisits(result);
    }, 1000);
  }, []);

  return (
    <div>
      <h1>项目</h1>

      <MyDialog />

      <MyChart
        options={{
          title: {
            text: "ECharts 入门示例",
          },
          tooltip: {},
          legend: {
            data: ["销量"],
          },
          xAxis: {
            data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
          },
          yAxis: {},
          series: [
            {
              name: "销量",
              type: "bar",
              data: visits,
            },
          ],
        }}
      />

      <MyChart
        options={{
          title: {
            text: "ECharts",
          },
          tooltip: {},
          legend: {
            data: ["销量"],
          },
          xAxis: {
            data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
          },
          yAxis: {},
          series: [
            {
              name: "销量",
              type: "line",
              data: [5, 20, 36, 10, 10, 20],
            },
          ],
        }}
      />
    </div>
  );
};

export default Projects;
